<!-- 常用银行卡管理 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="form" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="收款人姓名">
                <el-input v-model="form.name" placeholder="请输入收款人姓名"></el-input>
            </el-form-item>
        </CustomForm>
        <div>
            <el-button type="primary" @click="addCard">添加银行卡</el-button>
        </div>

        <el-table :data="list" style="width: 100%" height="630" v-loading="tableloading">
            <el-table-column prop="id" label="编号" width="110" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ $maskString(scope.row.name) }}
                </template> 
            </el-table-column>
            <el-table-column prop="kahao" label="卡号" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ $maskString(scope.row.kahao) }}
                </template> 
            </el-table-column>
            <el-table-column prop="khh" label="开户行名称" align="center" :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column prop="add_time" label="添加时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <!-- <el-table-column prop="status" label="状态" align="center" :show-overflow-tooltip="true">
            </el-table-column> -->

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="deleteBankAccount(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="form.page" :page-sizes="[10, 20, 30, 50]" :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog  class="dialog" title="添加新银行卡" :close-on-click-modal="false" :visible.sync="dialogAddBank"
            width="50%">
            <addBankCard v-if="dialogAddBank" @closeDialog="closeDialog" />
        </el-dialog>
    </div>
</template>

<script>
import { bankList, deleteBankAccount } from '@/api/businessUser/moneyManagment';
import addBankCard from './components/addBankCard.vue';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        addBankCard
    },
    data() {
        //这里存放数据
        return {
            tableloading: false,
            list: [],
            form: {
                pageSize: 10,
                page: 1,
                name: "",//收款人姓名
            },
            total: 0,
            dialogAddBank: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async bankList() {
            let res = await bankList(this.form)
            if (res.code == 200) {
                this.list = res.data && res.data.data;
                this.total = res.data && res.data.total;
            }
        },
        handleCurrentChange(page) {
            this.form.page = page;
            this.bankList();
        },
        handleSizeChange(pageSize) {
            this.form.pageSize = pageSize;
            this.form.page = 1;
            this.bankList();
        },
        onSubmit() {
            this.form.page = 1;
            this.bankList();
        },
        resetTable() {
            this.form = {
                pageSize: 10,
                page: 1,
                name: "",//收款人姓名
            };
            this.bankList();
        },
        deleteBankAccount(id) {
            this.$confirm('确定要删除该信息吗？', '删除收款人', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await deleteBankAccount({
                    id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
                this.bankList();
            }).catch(() => { });
        },
        addCard() {
            this.dialogAddBank = true;
        },
        closeDialog() {
            this.dialogAddBank = false;
            this.bankList();
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.bankList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.el-pagination {
    margin-top: 20px;
}
</style>